<template>
  <div class="" style="margin: 30px">
    <div class="top">
      <!-- 筛选 -->
      <div class="screen">
        <div style="width: 30%">筛选：</div>
        <el-input type="text" v-model.lazy="fsearch" style="width: 20%" placeholder="请输入关键字" @keyup.enter.native="sousuo" @clear=fnn @input="fnnn" clearable></el-input>
        <el-button slot="append" icon="el-icon-search" @click="sousuo()" />
      </div>
    </div>

    <!-- 表格 -->

    <div class="table">
      <el-table :data="tables" style="width: 100%" max-height="500">
        <!-- 地址 -->

        <el-table-column label="时间">
          <template slot-scope="scope">
            <span class="col-cont" v-html="showDate(scope.row.date)"></span>
          </template>
        </el-table-column>

        <!-- 用户名 -->

        <el-table-column label="用户名">
          <template slot-scope="scope">
            <span class="col-cont" v-html="showDate(scope.row.name)"></span>
          </template>
        </el-table-column>

        <!-- 地址 -->

        <el-table-column label="地址">
          <template slot-scope="scope">
            <span class="col-cont" v-html="showDate(scope.row.address)"></span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      fsearch: "",
      search: "",
      ftableData: [],
      // flag: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "张三",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "李四",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王五",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "赵六",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },

  components: {},

  computed: {
    //  模糊搜索
    tables: function () {
      const search = this.search;
      if (search) {
        return this.tableData.filter((dataNews) => {
          //Object.keys获取的是一个对象里的所以key值 返回成一个数组 调用some方法
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.tableData;
    },
  },

  mounted() {},
  methods: {
    // showInput() {
    //   this.flag = false;
    // },
    sousuo() {
      //   this.flag = true;
      this.search = this.fsearch;
    },
    // 筛选变色

    showDate(val) {
      val = val + "";
      // 判断搜索记录是否包含某个关键字不为false或空
      if (val.indexOf(this.search) !== -1 && this.search !== "") {
        return val.replace(
          this.search,
          '<font color=yellow">' + this.search + "</font>"
        );
      } else {
        return val; //不做修改
      }
    },
    fnn() {
      console.log(333);
      this.search = "";
    },
    fnnn() {
      if (this.fsearch === "") {
        this.search = "";
      }
    },
  },
};
</script>
